<template>
    <div class="padding-container">
        <!-- 搜索栏 -->
        <el-card class="search" style="text-align: right;">
            <!-- 使用el布局 -->
            <el-button type="success" plain size="medium" @click="exportExcel()">全部导出</el-button>
        </el-card>
        <!-- 显示栏 -->
        <el-card class="tables">
            <el-table id="table" height="430" :data="tableData" style="width: 100%" v-loading="tableLoading">
                <el-table-column type="index" label="#" width="80">
                    <template slot-scope="scope">
                        {{ (searchModel.pageNo - 1) * searchModel.pageSize + scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="logId" label="Id键" width="180" align="center">
                </el-table-column>
                <el-table-column prop="logType" label="操作" width="140" align="center">
                </el-table-column>
                <el-table-column prop="logMessage" label="详情" width="320" align="center">
                    <template slot-scope="scope">
                        <el-tag type="warning" effect="plain">
                            {{ scope.row.logMessage }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="logOpId" label="操作人员id" width="140" align="center">
                </el-table-column>
                <el-table-column prop="logOpName" label="操作人员" width="160" align="center">
                </el-table-column>
                <el-table-column prop="logGmtCreate" label="日志生成时间" align="center">
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 分页 -->
        <div class="page">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="searchModel.pageNo" :page-sizes="[10, 20, 30, 40]" :page-size="searchModel.pageSize"
                :pager-count="11" layout="total, sizes, prev, pager, next, jumper" :total="total" align="center" background>
            </el-pagination>
        </div>
    </div>
</template>

<script>
import logApi from '@/api/common/logManage'
import exportExecl from "@/utils/exportExecl.js";
import { createLogger } from 'vuex';
export default {
    data() {
        return {
            // 表格加载
            tableLoading: false,
            // 按钮加载
            btnLoading: false,
            // 搜索条件 + 页数 + 每页显示条目数 ，前端发起请求可以直接传入 searchModel 对象
            searchModel: {
                pageNo: 1,
                pageSize: 10,
            },
            // 总条数
            total: 0,
            // 表格数据
            tableData: []
        }
    },
    methods: {
        getLogList() {
            this.tableLoading = true;
            logApi.getlogList(this.searchModel).then(resp => {
                // 数据
                this.tableData = resp.data.rows
                // 总条目
                this.total = resp.data.total

                this.tableLoading = false;
            })
        },
        exportExcel() {
            this.tableLoading = true;
            let searchBackups = this.searchModel.pageNo;
            this.searchModel.pageNo = 1;
            logApi.getAllLogs().then(resp => {
                this.tableData = resp.data
                this.$alert('已导出完成', '日志导出', {
                    confirmButtonText: '确定',
                    callback: () => {
                        exportExecl("table", "日志信息.xlsx");
                        this.searchModel.pageNo = searchBackups;
                        this.getLogList();
                    }
                });
            })
        },
        handleSizeChange(val) {
            this.searchModel.pageSize = val;
            this.getLogList();
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.searchModel.pageNo = val;
            this.getLogList();
            console.log(`当前页: ${val}`);
        },
    },
    created() {
        this.getLogList();
    }
}
</script>

<style scoped></style>